<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const viewRoutes = router.getRoutes().filter(r => !r.redirect)
// console.log(router.getRoutes())
</script>

<template>
  <div class="app-layout">
    <nav>
      <div v-for="(item, index) in viewRoutes" :key="index" class="item">
        <router-link :to="item.path" active-class="activeCurrent">
          {{ item.meta.name }}
        </router-link>
      </div>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped lang="scss">
.app-layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 200px auto;
  nav {
    .item {
      display: block;
      font-size: 18px;
      margin: 15px 20px;
      a {
        color: #5b5956;
        text-decoration: none;
      }
      .activeCurrent {
        color: #409eff;
      }
    }
  }
  main {
    padding: 20px;
  }
}
</style>
